<template>
  <div class="dashboard-container">
    <div class="topTit">企业设置</div>
    <div class="setContent">
      <div class="title"><span>企业名称与logo设置</span> <span class="subBut" @click="subBut">保存</span></div>
      <div class="cont">
        <div class="comName"><span class="label">企业名称: </span> <input type="text" class="name" v-model="companyName" placeholder="请输入企业名称"></div>
        <div class="comLogo">
          <span class="label">企业Logo: </span>
          <div>
            <el-upload
              ref="upload"
              class="upload"
              :action="baseURL + `/sys/company/uploadOSS`"
              :headers="headers"
              :show-file-list="showFileList"
              :on-success="handleSuccess"
              :on-error="handleError"
              list-type="picture">
              <el-button size="small" type="primary" style="background: #3345ff; padding: 8px 40px;">点击上传</el-button>
            </el-upload>
            <img :src="logoUrl" style=" max-width: 300px;margin-top: 15px;"></img>
            <div slot="tip" class="el-upload__tip">建议上传图片尺寸为640*640，大小不超过1M</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { baseURL, headers } from './../../utils/request'
export default {
  name: 'Dashboard',
  data() {
    return {
      loading: true,
      showFileList:false,
      companyInfo: '',
      companyName: '',
      baseURL,
      headers: {
          Authorization: this.$store.getters.token || ''
      },
      fileList: [],
      logoUrl:'',
    }
  },
    computed: {
        ...mapGetters([
            'name'
        ])
    },
    created(){
       this.init()
    },
    methods: {
        init(){
            this.$store.dispatch('company/getCompanyInfoAct', this.params).then((res) => {
                this.companyInfo = res
                this.companyName = res.name
                this.logoUrl =  res.logo
                this.loading = false
            }).catch(() => {
                this.loading = false
            })

    },
    handleSuccess(res) {
      if(res.code == 200){
        this.$message.success('文件上传成功！')
        this.logoUrl = res.data
      }else{
        this.$message.error(res.message)
      }
    },
    handleError(){
        this.$message.error('图片上传失败！请处理后重试！')
    },
    subBut(){
        const params = {name: this.companyName,logo:this.logoUrl}
        if (!params.name){
            this.$message.error('请输入企业名称，企业名称不能为空！')
            return
        }
        this.$store.dispatch('company/putCompanyInfoAct', params).then((res) => {
          console.log(res);
          if(res.code == 200){
            this.$message.success('信息保存成功！')
            this.init()
          }else{
            this.$message.error(res.message)
          }
          this.loading = false
        }).catch(() => {
            this.$message.error('信息保存失败！请稍后重试')
            this.loading = false
        })
    }
  }
}
</script>
<style>
  .upload .el-upload-list__item-name{
    display: none;
  }
  .upload .el-upload-list__item{
    display: inline-block;
    width: inherit !important;
    height: inherit !important;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0px;
    border:none;
  }
  .upload .el-upload-list--picture{
    max-width: 200px;
  }
  .upload .el-upload-list__item img{
    max-width: 200px;
    width: inherit;
    height: inherit;
  }
  .upload .el-upload-list__item-status-label{
    z-index: 9;
  }
  .upload .el-upload-list__item.is-success .el-upload-list__item-status-label{
    display: none;
  }
  .upload .el-icon-close{
    background: #f00;
    z-index: 9;
    position: absolute;
    right: -17px;
    top: -7px;
    width: 46px;
    height: 26px;
    line-height: 37px;
    text-align: center;
    color:#fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;
  }
  .upload .el-upload-list--picture .el-upload-list__item-thumbnail{
    margin-left: 0;
  }
</style>
<style lang="scss" scoped>
  .dashboard {
    &-container{
      padding:0 15px;
      .topTit{
        line-height: 50px;
      }
      .name{
        border-radius: 3px;
      }
      .setContent{
        background: #fff;
        min-height: 500px;
        .title{
          padding: 0 15px;
          line-height: 40px;
          background: #eceffc;
          display: flex;
          justify-content: space-between;
          .subBut{
            color: #3345ff;
            cursor: pointer;
          }
        }
        .cont{
          display: flex;
          flex-direction: column;
          justify-items: center;
          align-items: center;
          padding-top: 40px;
          .comName,.comLogo{
            min-width: 400px;
            width: 60%;
            line-height: 50px;
            .name{
              font-size: 14px;
              padding: 5px 8px;
              border:solid 1px #ececec;
              min-width: 300px;
            }
            .label{
              margin-right: 10px;
              color:#666;
            }
          }
          .comLogo{
            display: flex;
            .labelInfo{
              color:#999;
              font-size: 12px;
            }
          }
        }
  }
}
}
</style>
